﻿@page "/icon-explorer"
@using FluentUI.Demo.AssetExplorer.Components.Controls
@using Microsoft.FluentUI.AspNetCore.Components.Extensions

<PageTitle>FluentUI Blazor - Icon Explorers</PageTitle>

<div class="icon-explorer" style="width: @(Width ?? "100%"); height: @(Height ?? "calc(100vh - 120px)");">

	@if (!string.IsNullOrEmpty(Title))
	{
		<h2>@Title</h2>
	}

	<FluentGrid Style="width: 100%;" Spacing="1">
		<FluentGridItem Style="min-width: 200px;">
			<FluentSearch @bind-Value="@Criteria.SearchTerm"
			@bind-Value:after="@(() => StartNewSearchAsync(nameof(Criteria.SearchTerm)))"
			Placeholder="Part of icon name..." />
		</FluentGridItem>
		<FluentGridItem Gap="0">
			<FluentSelect TOption="int"
			@bind-SelectedOption="@Criteria.Size"
			@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Size)))"
			Style="min-width: 100px;"
			Items="@AllAvailableSizes"
			OptionText="@(i => i > 0 ? $"Size{i}" : "[All]")" />
		</FluentGridItem>
		<FluentGridItem>
			<FluentSelect TOption="IconVariant"
			@bind-SelectedOption="@Criteria.Variant"
			@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Variant)))"
			Style="min-width: 100px;"
			Items="@(Enum.GetValues<IconVariant>())" />
		</FluentGridItem>
		<FluentGridItem>
			<FluentSelect TOption="Color"
			@bind-SelectedOption="@Criteria.Color"
			@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Color)))"
			Style="min-width: 100px;"
			Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))"
			OptionValue="@(i => i.ToAttributeValue())" />
		</FluentGridItem>
		<FluentGridItem>
			<FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleRight())"
			OnClick="@(() => StartNewSearchAsync(string.Empty))" />
		</FluentGridItem>
	</FluentGrid>

	@* Results *@
	@if (SearchInProgress)
	{
		<FluentProgressRing Style="width: unset; margin: 50px;" />
	}
	else
	{
		@if (IconsFound.Any())
        {
            <FluentLabel Class="header">
                Click on upper right clipboard icon in a card to copy a ready to paste <code>FluentIcon</code>
                component declaration to the clipboard.
            </FluentLabel>

            <div class="result-list">
                @foreach (var item in IconsForCurrentPage)
                {
                    <PreviewCard Icon="@item" IconColor="@Criteria.Color" TopLeftLabel="@(Criteria.Size > 0 ? string.Empty : $"{(int)item.Size}")" />
                }
            </div>

            <FluentLabel Class="footer">
                <FluentPaginator State="@PaginationState"
                                 CurrentPageIndexChanged="@HandleCurrentPageIndexChanged" />
            </FluentLabel>
        }
        else
        {
            <FluentLabel Class="not-found">
				@_searchResultMessage
            </FluentLabel>
        }
    }
</div>
